<template>
    <div class="workdrawing-container">
      <div style="padding: 10px; display: flex;align-items: center;justify-content: space-between;">
        <div style="display: flex;align-items: center;">
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">添加零件</el-button>
          <el-tag style="margin-left:10px;">种类：0</el-tag>
          <el-tag style="margin:0 10px;">数量：0</el-tag>
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">排样</el-button>
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">飞排</el-button>
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">飞传</el-button>
        </div>
        <div style="display: flex;align-items: center;">
          <el-button type="warning" icon="el-icon-refresh" size="small" @click="reset">全部重置</el-button>
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">排样</el-button>
          <el-button type="danger" icon="el-icon-document-add" size="small" @click="createBus">删除</el-button>
          <el-button type="primary" icon="el-icon-document-add" size="small" @click="createBus">导出</el-button>
        </div>
        <div>
          <el-button-group>
            <el-tooltip class="item" effect="dark" content="列表" placement="top-end">
              <el-button size="mini" type="primary" icon="el-icon-s-operation"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="缩略图" placement="top-end">
              <el-button  size="mini" icon="el-icon-s-grid"></el-button>
            </el-tooltip>
          </el-button-group>
        </div>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="待排" width="100" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="在排" width="100" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]"  align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="已排" width="100" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="缩略图" align="center">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px;" :src="imgLoadPath + scope.row.active_log" fit="contain" :preview-src-list="[imgLoadPath + scope.row.active_log]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="零件名称" width="150" trigger="click" align="center" show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
            <el-popover placement="bottom" title="检索" width="300" trigger="click">
              <el-input placeholder="输入关键词" v-model="val" class="input-with-select">
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <span slot="reference">
                <span>图纸名称</span>
                <span class="el-icon-search" style="margin-left:5px;"></span>
              </span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="材料" width="150" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="厚度(mm)" width="140" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="数量" width="100" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="尺寸(X*Y)(mm)" width="200" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图纸" align="center">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px;" :src="imgLoadPath + scope.row.active_log" fit="contain" :preview-src-list="[imgLoadPath + scope.row.active_log]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="旋转待定" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="待排产" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="待切" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="在切" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="已切" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="优先级" width="120" sortable :filters="[{text: '进行中', value: 1}, {text: '已结束', value: 1}]" align="center" :filter-method="filterHandler">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 1">进行中</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">已结束</el-tag>
          </template>
        </el-table-column>
      </el-table>
      </div>
      <!-- <div class="pagination">
        <el-pagination layout="sizes,total, prev, pager, next, jumper" :current-page="query.page" :page-size="query.pageSize" :page-sizes="[10, 50, 100, 150, 200]" @size-change="handleSizeChange" :total="total" @current-change="handlePageChange"></el-pagination>
      </div> -->
    </div>
  
  </template>
  
  <script>
  export default {
    name: 'Workpart',
    data() {
      return {
        val: '',
        copyLike: '',
        channelUrl: '',
        channelList: [],
        fit: 'scale-down',
        projectArr: [],
        templateType: [],
        categoryArr: [],
        type_hdlbarr: [],
        type_hdlxarr: [],
        dialog: false, //新增模板合同弹窗
        title: '', //查看模板合同弹框标题
        tmplateName: '', //合同模板名称输入框
        // contractName: '',
        tableData: [], //数据列表
        currentPage: 1, //初始页
        total: null,
        imgLoadPath: this.$API.ASSET_IMAGES_URL,
        uploadDocUrl: '',
        DOC_PATH: this.$API.DOC_PATH,
        query: {
          page: 1,
          keyword: '',
          pageSize: 10,
          status: 0,
          status_show: -1
        },
        dialogTitle: '活动新增',
        modelType: 1,
        itemId: '',
        questionList: [],
        multipleSelection: [],
        jsonFields: {},
        fillName: '',
        publiceUrl: '',
        exhibition_url: ''
      };
    },
    filters: {
      formDate: (val) => {
        return global.getdate1(val);
      }
    },
    mounted() {
      // this.initAjaxMethod();
    },
    methods: {
      filterHandler() {
  
      },
      handleCopyLike(row) {
        this.copyLike = window.location.origin + '/weChatApp/#/matchDetail?id=' + row.id;
        this.dialog = true;
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      //新建
      createBus() {
        this.$router.push({ path: '/zhactiveAdd', query: { type: 1 } });
      },
      //查看模板合同
      handleClick(data) {
        this.$router.push({ path: '/zhactiveAdd', query: { type: 2, id: data.id } });
      },
      //企业列表接口
      initAjaxMethod() {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.ZHACTIVE_INDEX, {
            page: this.query.page,
            keyword: this.query.keyword,
            pageSize: this.query.pageSize,
            status: this.query.status,
            status_show: this.query.status_show
          })
          .then((res) => {
            console.log('**************', res);
            loading.close();
            if (res.code == 1) {
              let list = Array.isArray(res.data.list) ? res.data.list : [];
              list.forEach(item => {
                item.status_show_switch = item.status_show == 0 ? true : false;
              });
              this.tableData = list;
              this.total = res.data.count;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(res.msg);
          });
      },
      //重置
      reset() {
        this.query.page = 1;
        this.query.keyword = '';
        this.query.exhibition_id = '';
        this.query.status = 0;
        this.query.status_show = -1;
        this.query.signup_type = -1;
        this.initAjaxMethod();
      },
      delAllSelection() {
        let arr = [];
        if (this.multipleSelection.length <= 0) {
          this.$message({
            type: 'error',
            message: '请选择活动'
          });
          return false;
        } else {
          this.multipleSelection.forEach((item) => {
            arr.push(item.id);
          });
          this.handleDelete(arr.join(','), this.$API.ZHACTIVE_ALL_DEL);
        }
      },
      changeStatus(item) {
        console.log('item', item);
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(this.$API.ZHACTIVE_STATUS, {
            id: item.id,
            status_show: item.status_show_switch == true ? 0 : 1
          })
          .then((res) => {
            loading.close();
            if (res.code == 1) {
              this.$message.success('操作成功!');
              this.initAjaxMethod();
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(res.msg);
          });
      },
      //删除合同模板信息
      handleDelete(id, url = this.$API.ZHACTIVE_DEL) {
        console.log(id);
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post(url, { id: id }).then((res) => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initAjaxMethod();
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        });
      },
      //点击第几页
      handlePageChange(currentPage) {
        this.query.page = currentPage;
        this.initAjaxMethod();
      },
      //点击第几页
      handleSizeChange(currentPage) {
        this.query.pageSize = currentPage;
        this.initAjaxMethod();
      }
    }
  };
  </script>
  <style lang="less">
  .workpartthumbnail-container{
    .el-table__body-wrapper{
      .el-table__body{
        height: 0!important;
      }
      .el-table__empty-block{
        height: 0!important;
        min-height: 0!important;
      }
    }
  }
    
  </style>
  
  